<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { TagOutlined, ClockCircleOutlined,UserOutlined,EyeOutlined } from '@ant-design/icons-vue'
import moment from 'moment';

const emit = defineEmits(['clickImage', 'titleClicke'])

// 接受的数据类型
interface articleItem {
    articleId: number;
    articleTitle: string;
    articleDesc: string;
    userName: string,
    publicTime: string,
    tags: string[];
    articleCover: string
}

const props = defineProps({
    article: {
        type: Object,
        default: () => { },
    }
})

function returnPublicTime(publicTime:string){
    const diffStr =  moment().diff(publicTime,'day')
    if(diffStr>=3){
        return moment(publicTime).format('YYYY-MM-DD HH:MM:SS')
    }
    else if(diffStr==0){
        let houre = moment().diff(publicTime,'hour')
        return `${houre}小时前`
    }
    return `${diffStr}天前`
}

// 点击图片时候向外面暴露一个方法
let prievewImgHandler = (article: articleItem) => {
    emit('clickImage', article)
}
// 点击标题时候向外面暴露一个方法
let titleHandler = (article: articleItem) => {
    emit('titleClicke', article)
}


</script>

<template>
    <div class="article-item">
        <div class="article-left">
            <h2 class="article-item-title" @click="titleHandler(article)">{{ article.articleTitle }}</h2>
            <p class="article-item-desc">{{ article.articleDesc }}</p>
            <p class="public-user">
                <span class="article-public-name">
                  <UserOutlined />{{ article.userParty }}</span>
                <span class="article-public-time">
                    <ClockCircleOutlined class="time-icon" />
                    {{ returnPublicTime(article.publicTime) }}
                </span>
              <span class="article-public-time">
                <EyeOutlined />
                {{ article.viewsCount }}
              </span>
                <TagOutlined class="tag-icon" />
                <span class="article-tag" v-for="item in article.tags">{{ item.tagName }}</span>
            </p>
        </div>
        <div class="article-right">
            <img class="article-cover" @click="prievewImgHandler(article)" v-lazy="article.articleCover" alt="" srcset="">
        </div>
    </div>
</template>


<style lang="scss" scoped>
.article-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    max-height: 145px;
    padding: 8px 10px;
    border-bottom: 1px dashed #dddcdcb2;
    padding: 4px 10px;

    .article-left {
        width: calc(100% - 108px);

        .article-item-title {
            width: 100%;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            overflow: hidden;
            margin-bottom: 5px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            cursor: pointer;
            transition: .3s all;

            &:hover {
                color: #1e80ff;
            }
        }

        .article-item-desc {
            margin: 8px 0px;
            overflow: hidden;
            font-weight: 400;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-height: 22px;
            -webkit-box-orient: vertical;
            font-size: 13px;
            color: #8a919f;
        }

        .public-user {
            color: #999;
            font-size: 12px;

            span {
                font-weight: 300;
            }

            .article-public-time {
                margin-left: 15px;
            }

            .tag-icon {
                margin-left: 15px;
            }

            .article-tag {
                cursor: pointer;
                padding: 0px 5px;
                transition: .3s all;

                &:hover {
                    color: #000;
                }
            }
        }
    }

    .article-right {
        display: flex;
        width: 108px;
        text-align: right;
        height: 100px;
        overflow: hidden;

        .article-cover {
            margin: auto 0px;
            width: 108px;
            height: 72px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ececec;
        }
    }

    &:hover {
        background: rgba(21, 21, 21, 0.025);
    }
}

::v-deep {
    @media screen and (max-width: 480px) {
            .article-left {
                // width: 64% !important;
                overflow: hidden;

                .article-item-title {
                    font-size: 14px !important;
                    margin-bottom: 0px !important;
                }

                .article-item-desc {
                    margin: 0px !important;
                    font-size: 12px !important;
                    -webkit-line-clamp: 1 !important;
                }
                .article-public-name {
                    display: none;
                }
                .article-public-time {
                    display: none;
                }
                .tag-icon {
                    margin: 0px !important;
                }

                .public-user {
                    .article-tag {
                        font-size: 12px !important;
                    }
                    margin: 0px !important;
                }
            }

            // .article-right {
            //     width: 35% !important;
            //     height: 70px !important;
            //     line-height: 70px !important;
            //     overflow: hidden !important;
            // }
        
    }

    @media screen and (max-width: 576px) {
        .article-item {
            
        }
        .article-left {
                // width: 64% !important;
                overflow: hidden;

                .article-item-title {
                    font-size: 14px !important;
                    margin-bottom: 0px !important;
                }

                .article-item-desc {
                    margin: 0px !important;
                    font-size: 12px !important;
                    -webkit-line-clamp: 1 !important;
                }
                .article-public-name {
                    display: none;
                }
                .article-public-time {
                    display: none;
                }
                .tag-icon {
                    margin: 0px !important;
                }

                .public-user {
                    .article-tag {
                        font-size: 12px !important;
                    }
                    margin: 0px !important;
                }
            }

            // .article-right {
            //     width: 35% !important;
            //     height: 70px !important;
            //     line-height: 70px !important;
            //     overflow: hidden !important;
            // }
    }
}</style>